<template>
	<!-- 通过传值来控制显示的背景色 -->
	<div class="navBar" :style="backColor">
		<div class="backBtn" @click="onClickLeft">
			<van-icon name="arrow-left" class="icon" />
			<div class="right">
				<div class="childLeft">
					<div class="text">
						<slot name="head"></slot>
					</div>
					<div class="timeLimit">
						<slot name="subhead"></slot>
					</div>
				</div>
				<div class="childRight">
					<image src="@/static/order-icons/kefu.png" mode=""></image>
					<text>联系客服</text>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
	text: String
});
const onClickLeft = () => history.back();
const backColor = computed(() => {
	if (props.text == '待付款') {
		return 'background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));';
	} else if (props.text == '交易关闭') {
		return 'background: rgba(70,70,74,1);';
	} else if (props.text == '已发货' || props.text == '等待发货') {
		return 'background: rgba(78, 71, 255, 1);';
	}
});
</script>

<style lang="scss" scoped>
.navBar {
	width: 100%;
	// height: 80px;
	// max-height: 80px;

	color: white;

	.backBtn {
		width: 91%;
		display: flex;
		flex-direction: column;
		// margin: 0 auto;
		padding: 38px 30px 70px 33px;

		// align-items: center;
		.right {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.childRight {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				image {
					width: 41px;
					height: 44px;
				}
			}
		}

		.text {
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			font-size: 48px;
			color: white;
			display: flex;
			align-items: center;
		}

		.timeLimit {
			display: flex;
			align-items: center;
			font-size: 24px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.5);
			margin-left: 64px;
			--van-count-down-text-color: #626264;
			--van-count-down-font-size: 24px;

			::v-deep.timeDown {
				margin: 0 10px;
			}
		}
	}

	.icon {
		padding: 32px 0;
		font-size: 30px;
	}
}
</style>
